<!--
 * @Author: your name
 * @Date: 2021-07-20 14:21:01
 * @LastEditTime: 2021-10-20 16:41:45
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \usp-osm-frondend\src\views\orderCenter\serviceOrder\details.vue
-->
<template>
  <div
    class="white-content"
    v-loading="pageLoading"
    element-loading-text="loading"
  >
    <div class="newPageTitle">
      <span class="backIcon" @click="goBack"><i class="el-icon-back"></i></span>
      <h1 style="display: inline-block; margin-left: 10px; font-weight: bold">
        服务订单详情
      </h1>
    </div>
    <div class="detail-content-section">
      <h2>
        <span>服务订单号：{{ datas.orderInfo.externalOrderNo }}</span>
        <span style="float: right">
          状态：{{
            getDictionaryNameByCode(
              'SERVICEWORKORDERTYPE',
              datas.orderInfo.status
            )
          }}
        </span>
      </h2>
      <el-form label-width="160px" label-position="right">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="服务中心：">
              {{ datas.orderInfo.serviceCenter }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单总金额：">
              {{ datas.orderInfo.totalAmount | numFormat}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="自费总金额：">
              {{ datas.orderInfo.selfExpenseAmount | numFormat }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="结算金额：">
              {{
                datas.orderInfo.settlementAmount
              }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="结算单号：">
              {{
                datas.orderInfo.settlementOrderNo
              }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工单创建时间：">
              {{ datas.orderInfo.orderCreateTime | timestampToChange('time') }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="预计交车时间：">
              {{
                datas.orderInfo.recommendedDeliveryTime
                  | timestampToChange('time')
              }}
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="订单结算时间：">
              {{
                datas.orderInfo.orderSettlementTime | timestampToChange('time')
              }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建时间：">
              {{ datas.orderInfo.createTime | timestampToChange('time') }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="更新时间：">
              {{ datas.orderInfo.updateTime | timestampToChange('time') }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="detail-content-section">
      <el-form label-width="140px" label-position="right">
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="车辆识别号：">
              {{ datas.customerAndCarInfo.vin }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车型：">
              {{ datas.customerAndCarInfo.moduleName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车牌号：">
              {{ datas.customerAndCarInfo.plateNumber }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="车主姓名：">
              {{ datas.customerAndCarInfo.carOwnerName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="送修人ID：">
              {{ datas.customerAndCarInfo.customerId }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="送修人姓名：">
              {{ datas.customerAndCarInfo.customerName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="送修人联系方式：">
              {{ datas.customerAndCarInfo.customerMobile }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="送修人邮箱：">
              {{ datas.customerAndCarInfo.customerEmail }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="进场里程：">
              {{ datas.customerAndCarInfo.enteringFactoryMiles }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="detail-content-section">
      <h2>服务明细</h2>
      <v-table
        :data="datas.serviceDetailInfoList"
        border
        rowkey="id"
        :expand-row-keys="expends"
        :pagination="false"
        :default-expand-all="true"
      >
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-table
              :data="scope.row.orderItems"
              label-position="left"
              inline
              class="demo-table-expand"
            >
              <el-table-column
                label="类型"
                align="center"
                min-width="160"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  <span>{{ getDictionaryNameByCode('SERVICEWORKORDERITEMTYPE', scope.row.itemType) }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="名称"
                align="center"
                min-width="160"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.materialName }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="单价"
                align="center"
                min-width="160"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.unitPrice | numFormat }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="指导单价"
                align="center"
                min-width="160"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.suggestedUnitAmount | numFormat }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="数量"
                align="center"
                min-width="160"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.quantity }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="总价"
                align="center"
                min-width="160"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.totalAmount | numFormat }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="实际总金额"
                align="center"
                min-width="160"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.originalTotalAmount | numFormat }}</span>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column
          label="工时名称"
          align="center"
          prop="artificialName"
          min-width="100"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="厂商建议工时（小时）"
          align="center"
          prop="suggestedWorkHours"
          min-width="140"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="实际工时（小时）"
          align="center"
          prop="actualWorkHours"
          min-width="130"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="工时单价"
          align="center"
          prop="artificialUnitPrices"
          min-width="110"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            {{ scope.row.artificialUnitPrices | numFormat }}
          </template>
        </el-table-column>
        <el-table-column
          label="工时总金额"
          align="center"
          prop="artificialTotalAmount"
          min-width="110"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            {{ scope.row.artificialTotalAmount | numFormat }}
          </template>
        </el-table-column>
        <el-table-column
          label="工时实际总金额"
          align="center"
          prop="artificialSalesTotalAmount"
          min-width="110"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            {{ scope.row.artificialSalesTotalAmount | numFormat }}
          </template>
        </el-table-column>
      </v-table>
    </div>
    <div class="detail-content-section">
      <h2>支付信息</h2>
      <el-form label-width="140px" label-position="right">
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="支付订单号：">
              {{ datas.paymentInfo.paymentNo }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="支付平台：">
              {{ datas.paymentInfo.paymentMethod }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="支付渠道：">
              {{ getDictionaryNameByCode('PAYMENTMETHOD', datas.paymentInfo.paymentMethod) }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="支付状态：">
              {{ getDictionaryNameByCode('ORDERPAYMENTSTATUS', datas.paymentInfo.paymentStatus) }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="实付金额：">
              {{ datas.paymentInfo.buyerPayAmount | numFormat }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="支付订单创建时间：">
              {{ datas.paymentInfo.createTime | timestampToChange('time') }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="支付完成时间：">
              {{ datas.paymentInfo.paymentFinishTime | timestampToChange('time') }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import VTable from '@/components/PageTable/index'
import { setRouterParams, getRouterParams } from '@/utils/auth'
import { getServiceOrderDetail } from '@/api/order'
import { common } from '@/mixins/common'
import { mapGetters } from 'vuex'
export default {
  name: 'serviceOrderDetails',
  components: {
    VTable
  },
  data () {
    return {
      datas: {
        customerAndCarInfo: {},
        orderInfo: {},
        serviceDetailInfoList: [],
        paymentInfo: {}
      },
      tableData: [],
      pageLoading: false,
      id: '',
      expends: [],
      getRowKeys (row) {
        return row.artificialName
      }
    }
  },
  mixins: [common],
  computed: {
    ...mapGetters(['lookupItems'])
  },
  mounted () {
    let params = {}
    if (this.$route.params.workNo) {
      setRouterParams(this.$route)
      params = this.$route.params
    } else {
      params = getRouterParams(this.$route)
    }
    const id = params.workNo
    this.getDeveryDetailById(id)
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    getDeveryDetailById (id) {
      this.pageLoading = true
      getServiceOrderDetail(id)
        .then((res) => {
          if (res) {
            if (Number(res.code) === 1) {
              this.datas = res.obj
              if (!this.datas.paymentInfo) {
                this.datas.paymentInfo = {
                  buyerPayAmount: '',
                  createTime: '',
                  paymentFinishTime: '',
                  paymentMethod: '',
                  paymentNo: '',
                  paymentPlatform: '',
                  paymentStatus: ''
                }
              }
              if (this.datas.serviceDetailInfoList.length !== 0) {
                this.datas.serviceDetailInfoList.forEach((item) => {
                  if (item.orderItems.length !== 0) {
                    item.orderItems.forEach((ele, index) => {
                      this.expends.push(ele.materialName)
                    })
                  }
                })
              }
            } else {
              this.$alert('获取发货单详情失败', {
                callback: (action) => {
                  this.goBack()
                }
              })
            }
            this.pageLoading = false
          }
        })
        .catch(() => {
          this.pageLoading = false
          this.$alert('获取发货单详情失败')
        })
    },
    masterDetails (id) {
      if (!this.$auth('orderManagement:mainOrder:detail')) {
        this.$alert('您没有权限')
        return false
      }
      this.$router.push({ name: 'masterOrderDetails', params: { id: id } })
    },
    subDetails (id) {
      if (!this.$auth('orderManagement:subOrder:detail')) {
        this.$alert('您没有权限')
        return false
      }
      this.$router.push({ name: 'suborderDetails', params: { id: id } })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.footer {
  width: 100%;
  margin: 0;
}
.detail-section {
  h2 {
    margin: 15px 0;
    font-weight: bold;
  }
}
/deep/ .el-form-item {
  margin-bottom: 0;
}
</style>
